---
title: Responsive | gluestack-ui
description: gluestack-ui provides an easy way to make responsive components, in this guide we will learn how to make components responsive.
---

import { Meta } from '@storybook/addon-docs';

import {
  GluestackUIProvider,
  Text,
  Box,
  Center,
  Button,
} from '@gluestack-ui/themed';
import { transformedCode, transformedThemedCode } from '../../../utils';
import Wrapper from '../../../components/Wrapper';

import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';

<Meta title="ui/Home/Styling/Responsive" />

# Responsive

**`@gluestack-ui/themed`** components are responsive, once we pass the default [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file imported from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config) to `GluestackUIProvider`, where we have defined different **breakpoints** according to which styles can be applied.

Basic breakpoints defined in `config` imported from **`@gluestack-ui/config`**.

```jsx
mediaQueries: {
  base: '@media screen and (min-width: 0)',
  sm: '@media screen and (min-width: 480px)',
  md: '@media screen and (min-width: 768px)',
  lg: '@media screen and (min-width: 992px)',
  xl: '@media screen and (min-width: 1280px)',
},
```

We can apply different styling based on different breakpoints like done in below example. In the above example in the sx props we are defining different styles for different breakpoints.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      <Box justifyContent="center" alignItems="center" h="100%">
        <Box
        $base-bg="$red500"
        $md-bg="$green500"
        $lg-bg="$blue500"
        alignItems="center"
        >
          <Text>This is a box</Text>
        </Box>
      </Box>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
        Box,
      },
      argsType: {},
    }}
  />
</AppProvider>

Expo snack link for the above example is provided [here](https://snack.expo.dev/@gluestack/gluestack-ui-responsive-style).

> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported.